<template>
    <div>
        <Search />

        <el-table :data="productList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="90"> </el-table-column>
            <el-table-column label="商品图片" width="150">
                <template slot-scope="scope">
                    <img :src="scope.row.pic" class="product_img" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column label="价格/货号">
                <template slot-scope="scope">
                    <div>价格：￥{{ scope.row.original_price }}</div>
                    <div>货号：{{ scope.row.product_sn }}</div>
                </template>
            </el-table-column>
            <el-table-column label="标签">
                <template slot-scope="scope">
                    <!-- 
                        1：true
                        0：false
                     -->
                    <div>上架：{{ scope.row.publish_status ? "是" : "否" }}</div>
                    <div>新品：{{ scope.row.new_status ? "是" : "否" }}</div>
                    <div>推荐：{{ scope.row.recommand_status ? "是" : "否" }}</div>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort"> </el-table-column>
            <el-table-column label="销量" prop="sale"> </el-table-column>
            <el-table-column label="审核状态" width="130">
                <template slot-scope="scope">
                    {{ scope.row.verify_status | verifyType }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="editor(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-bolck">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.pageNum"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Search from "@/components/Search";
import { getProductList, deleteProduct } from "@/network/product/";
export default {
    name: "product",
    data() {
        return {
            productList: [],
            listQuery: {
                pageSize: 10, //一页10条数据
                pageNum: 1, //当前页
            },
            total: 0,
            currentPage: 1,
        };
    },
    methods: {
        editor(id) {
            this.$router.push("/pms/productupdate/" + id);
        },
        del(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteProduct({ id: id }).then((res) => {
                        if (res.type == "success") {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getCateList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        handleSizeChange(val) {
            this.listQuery.pageSize = val;
            this.listQuery.pageNum = 1;
            this.getCateList();
        },
        handleCurrentChange(val) {
            console.log("修改当前页的页码 触发了", val);
            this.listQuery.pageNum = val;
            this.getCateList();
        },
        // 获取分页数据
        async getCateList() {
            const { product, total } = await getProductList(this.listQuery);
            this.productList = [...product];
            this.total = total;
        },
    },
    mounted() {
        this.getCateList();
    },
    filters: {
        verifyType(value) {
            console.log(value);
            return value ? "已审核" : "未审核";
        },
    },
    components: {
        Search,
    },
};
</script>

<style lang="scss" scoped>
.product_img {
    width: 100px;
}

.pagination-bolck {
    margin: 20px 0;
}
</style>
